<template>
	<view class="wrap safe-area flex column align-center">
		<view class="wrap-white-bg">
			<block v-for="(item, index) in list" :key="index">
				<rowInput :item="item" v-model="dataInfo[item.key]" v-if="item.type === 'input'" />

				<rowCode
					codeType="edit_pay_password"
					:mobile="dataInfo.mobile"
					:item="item"
					v-model="dataInfo[item.key]"
					v-else-if="item.type === 'code'"
				/>

				<rowPasswodVue v-else-if="item.type === 'password'" :item="item" v-model="dataInfo[item.key]" />
			</block>
		</view>

		<view class="sure-btn theme-gradient-btn f-34" @click="onSave">保存</view>
	</view>
</template>

<script>
	import { EditPayPassword } from "@/API/mine.js";
	import rowInput from "@/components/form/rowInput.vue";
	import rowCode from "@/components/form/rowCode.vue";
	import rowPasswodVue from "@/components/form/rowPasswod.vue";
	
	export default {
		components: {
			rowInput,
			rowCode,
			rowPasswodVue,
		},
		data() {
			return {
				list: [
					{
						title: "手机号",
						type: "input",
						key: "mobile",
						place: "请输入手机号",
						mode: "tel",
						maxlength: 11,
						direct: "row",
						tips: "请输入手机号",
						disabled: true,
					},
					{
						title: "验证码",
						type: "code",
						key: "code",
						place: "请输入验证码",
						mode: "number",
						maxlength: 6,
						direct: "row",
						tips: "请输入验证码",
					},
					{
						title: "新支付密码",
						type: "password",
						key: "password",
						place: "请输入6位支付密码",
						mode: "safe-password",
						maxlength: 6,
						direct: "row",
						tips: "请输入新支付密码",
					},
					{
						title: "确认支付密码",
						type: "password",
						key: "sure_password",
						place: "请输入确认支付密码",
						mode: "safe-password",
						maxlength: 6,
						direct: "row",
						tips: "请输入确认支付密码",
					},
				],
				dataInfo: {
					mobile: "", //手机号
					code: "", //验证码
					password: "", //支付密码
					sure_password: "", //确认支付密码
				},
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.title,
			});

			this.dataInfo.mobile = this.$stoarge.getUserInfo().mobile;
		},
		methods: {
			/**
			 * 保存
			 */
			onSave() {
				if (this.$filters.judgeFormData(this.list, this.dataInfo)) {
					this.$throttle(() => {
						this.changeData()
					})
				}
			},
			/**
			 * 更改密码
			 */
			changeData() {
				EditPayPassword(this.dataInfo.password, this.dataInfo.code).then(res => {
					this.$st.success("设置成功", () => {
						uni.navigateBack();
					})
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/css/publish.css";
</style>
